<template>
    <div class="header">
        <el-tabs v-model="activeValue" type="card">
            <el-tab-pane v-for="item in panes" :label="item.label" :name="item.name" :key="item.key">
                <component :is="item.content" :activeValue="activeValue" v-bind="$attrs"></component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import InvestmentManagerStatistic from './transfinite-Indicator/investment-manager-statistic.vue';
import ProductStatistics from './transfinite-Indicator/product-statistics.vue';
import TransfiniteIndicatorDetail from './transfinite-Indicator/transfinite-indicator-detail.vue';

@Component({ name: 'TransfiniteIndicator', components: { ProductStatistics, InvestmentManagerStatistic, TransfiniteIndicatorDetail } })
export default class TransfiniteIndicator extends Vue {
    activeValue: string = 'product-statistics';
    //  + this.$attrs.activeValue
    panes: any[] = [
        {
            label: '产品统计',
            name: 'product-statistics',
            content: 'ProductStatistics',
        },
        {
            label: '投资经理统计',
            name: 'investment-manager-statistic',
            content: 'InvestmentManagerStatistic',
        },
        {
            label: '超限指标明细',
            name: 'transfinite-indicator-detail',
            content: 'TransfiniteIndicatorDetail',
        },
    ];

    @Watch('$attrs.echartParams', { deep: true })
    async handleEchartParams() {
        let { name, params, isClick }: any = this.$attrs.echartParams;
        if (this.$attrs.activeValue === 'transfinite-Indicator' && !isClick) {
            console.log(name, this.$attrs.activeValue, params, 'params');
            this.activeValue = name[1];
        }
        console.log(this.activeValue, 'activeValue');
    }
}
</script>
<style lang="scss" scoped>
/deep/ .el-tabs {
    .el-tabs__content {
        padding: 10px 0 !important;
    }
}
</style>
